/* eslint-disable no-unused-vars */
<template>
  <div class="cms_order">
    <left-menus active="1"></left-menus>
    <div class="cms_container">
    <bread-crumb :title="{group:'订单管理',name:'订单列表'}"></bread-crumb>
    <div class="cms_table_box">
      <h3>订单列表</h3>
      <div class="cms_search">
      <el-input v-model="params.orderNo" placeholder="订单号"  clearable></el-input>
      <el-input v-model="params.userName" placeholder="买家账号"  clearable></el-input>
      <el-select v-model="params.cnySource" placeholder="支付来源" :clearable="true">
        <el-option
          v-for="item in [{label:'微信',value:'wx'},{label:'支付宝',value:'alipay'}]"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-select v-model="params.isInvoice" placeholder="发票" :clearable="true"  >
        <el-option
          v-for="item in [{label:'开发票',value:1},{label:'不开发票',value:0}]"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-select v-model="params.isComment" placeholder="评价" :clearable="true" >
        <el-option
          v-for="item in [{label:'已评价',value:1},{label:'未评价',value:0}]"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-select v-model="params.status" placeholder="订单状态" :clearable="true" >
        <el-option
          v-for="item in [{label:'拒收',value:-3},{label:'未付款',value:-2},{label:'取消',value:-1},{label:'待发货',value:0},{label:'配送中',value:1},{label:'确认收货',value:2},{label:'已退款',value:3}]"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-button type="primary" @click="inputSearch">查询</el-button>
    </div>
      <div class="cms_table">
      <el-table :data="tableLists" style="width: 100%" border :header-cell-style="{color:'#606266'}" v-loading="loading">
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-table
              class="cms_table1"
              :header-cell-style="{background:'#F5F7FA',color:'#606266'}"
              :data="scope.row.orderGoodsList"
              border
              style="width: 100%"
            >
              <el-table-column  label="商品" >
                <template slot-scope="scope">
                  <div class="merk_goods">
                    <img :src="scope.row.pic" alt="">
                    <div>
                      <p>{{scope.row.goodsName}}</p>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="goodsTotalPrice" label="总价格" width="180"></el-table-column>
              <el-table-column prop="cny" label="人民币"></el-table-column>
              <el-table-column prop="points" label="积分"></el-table-column>
              <el-table-column prop="count" label="件数"></el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column prop="orderNo" label="订单号" width="160"></el-table-column>
        <el-table-column prop="nickName" label="用户名"></el-table-column>
        <el-table-column prop="storeName" label="店铺"></el-table-column>
        <el-table-column prop="cnySource" label="支付方式"  width="90">
          <template slot-scope="scope">
            <p>{{scope.row.cnySource == 'wx' ? '微信': '支付宝'}}</p>
          </template>
        </el-table-column>
        <el-table-column label="订单状态" width="90">
          <template slot-scope="scope">
            <p>{{['拒收','未付款','用户取消','待发货','配送中','确认收货','已退款'][parseInt(scope.row.status) + 3]}}</p>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" width="150">
          <template slot-scope="scope">
            <p style="font-size:12px">{{scope.row.createTime | dateformat}}</p>
          </template>
        </el-table-column>
        <!-- <el-table-column label="支付时间" width="150">
          <template slot-scope="scope">
            <p style="font-size:12px">{{scope.row.payTime ? (scope.row.payTime | dateformat) : ''}}</p>
          </template>
        </el-table-column> -->
        <el-table-column label="评论">
          <template slot-scope="scope">
            <p style="font-size:12px">{{scope.row.remark}}</p>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="90">
          <template slot-scope="scope" class="cms_btns">
            <el-button class="cms_btn" @click="seeDetail(scope.row)" type="primary" size="mini" plain>详情</el-button>
                <el-button class="cms_btn" @click="expressDetail(scope.row.id,1)" type="primary" size="mini" v-if="[1,2].includes(scope.row.status)" plain>物流</el-button>
                <el-button class="cms_btn" @click="sendGoods(scope.row.id)" type="success" size="mini" v-if="scope.row.status === 0" plain>发货</el-button>
                <el-button class="cms_btn" @click="cancelOrder(scope.row.id)"   type="danger" size="mini" v-if="scope.row.status === -2" plain>取消</el-button>
                <el-button class="cms_btn" @click="deleteOrder(scope.row.id)"   type="danger" size="mini" v-if="[-1,2].includes(scope.row.status)" plain>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="cms_pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total,sizes,prev, pager, next,jumper"
        :total="total"
        :current-page="currentPage"
      ></el-pagination>
    </div>
    </div>
    <el-dialog title="发货" :visible.sync="sendDialogVisible" width="30%" @close="sendDialogVisible = false">
      <el-select v-model="sendApiParams.expressCode" placeholder="请选择快递公司" style="width:100%;margin-bottom:30px">
        <el-option
          v-for="company in expressCompanys"
          :key="company.comid"
          :label="company.com"
          :value="company.comid">
          <div class="cms_express">
            <img :src="company.src" alt="" style="width:20px">
            <span>{{company.com}}</span>
          </div>
        </el-option>
      </el-select>
      <el-input v-model="sendApiParams.expressNo" placeholder="快递单号"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="sendDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sureSendApi()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="取消订单" :visible.sync="cancelDialogVisible" width="30%" @close="cancelDialogVisible = false">
      <el-input type="textarea" v-model="cancelReason" placeholder="请输入取消原因"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="suerCancel()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="删除订单" :visible.sync="deleteDialogVisible" width="30%" @close="deleteDialogVisible = false">
      <el-input type="textarea" v-model="deleteReason" placeholder="请输入删除订单原因"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="suerDelete()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="物流信息" :visible.sync="expressDiagVisible" width="60%" @close="expressInfo = null;expressDiagVisible = false">
      <div class="block" v-if="expressInfo">
        <p class="express_item"><span>快递公司：</span><span>{{expressInfo.com}}</span></p>
        <p class="express_item"><span>快递单号：</span><span>{{expressInfo.number}}</span></p>
        <el-timeline class="express_timeline">
          <el-timeline-item
            v-for="(activity, index) in expressInfo.traces"
            :key="index"
            :type="index ===0 ? 'primary' : ''"
            :timestamp="activity.time">
            {{activity.desc}}
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-dialog>
    <el-dialog title="订单详情"  width="80%" :visible.sync="orderDetailVisible" @close="orderDetailVisible = false;isSeeExpressFromDetail=false">
        <div v-if="orderDetail">
          <div class="cms_o_status">
          <i class="iconfont" :class="['cms_s0','cms_s1','cms_s2','cms_s3','cms_s3','cms_s4'][orderDetail.status + 3]">{{['&#xe625;','&#xe63f;','&#xe67a;','&#xe606;','&#xe620;','&#xe63c;'][orderDetail.status + 3]}}</i>
          <div>
            <p>订单状态： {{['拒收','未付款','取消','待发货','配送中','确认收货','已退款'][orderDetail.status + 3]}}</p>
          </div>
        </div>
        <ul class="merk_detail">
          <li>详细信息</li>
          <li>订单编号: &nbsp;{{orderDetail.orderNo}}</li>
          <li>店铺名称: &nbsp;{{orderDetail.storeName}}</li>
          <li>昵称: &nbsp;{{orderDetail.nickName}}</li>
          <li>账号: &nbsp;{{orderDetail.userName}}</li>
          <li>支付方式: &nbsp;{{orderDetail.cnySource == 'wx' ?'微信':'支付宝'}}</li>
          <li>发票类型: &nbsp;{{orderDetail.isInvoice ? '开发票':'不开发票'}}</li>
          <li>收货人:  &nbsp;{{orderDetail.addressee}}</li>
          <li>手机号:  &nbsp;{{orderDetail.phone}}</li>
          <li style="width:100%">收货地址:  &nbsp;{{orderDetail.address}}</li>
        </ul>
        <ul class="merk_express" v-if="expressInfo">
          <li>物流信息</li>
          <li>快递单号: &nbsp;{{expressInfo.number}}</li>
          <li>物流公司: &nbsp;{{expressInfo.com}}</li>
          <li>物流跟踪:<span class="merk_span" @click="isSeeExpressFromDetail = !isSeeExpressFromDetail">{{isSeeExpressFromDetail ? '收起':'查看'}}</span></li>
        </ul>
        <div class="block cms_block" v-if="expressInfo && isSeeExpressFromDetail">
              <el-timeline class="express_timeline">
                <el-timeline-item
                  v-for="(activity, index) in expressInfo.traces"
                  :key="index"
                  :type="index ===0 ? 'primary' : ''"
                  :timestamp="activity.time">
                  {{activity.desc}}
                </el-timeline-item>
              </el-timeline>
            </div>
        <el-table
              class="cms_detail_table"
              :span-method="objectSpanMethod"
              :header-cell-style="{background:'#F5F7FA',color:'#606266'}"
              :data="orderDetail.orderGoodsList"
              border
              style="width: 100%;margin-top:30px"
            >
              <el-table-column label="商品"  width="300">
                <template slot-scope="scope">
                  <div class="merk_goods">
                    <img :src="scope.row.pic" alt="">
                    <div>
                      <p>{{scope.row.goodsName}}</p>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="count" label="数量" ></el-table-column>
              <el-table-column prop="cny" label="人民币"></el-table-column>
              <el-table-column prop="points" label="积分"></el-table-column>
              <el-table-column label="运费（元）" >
                <template>
                  <p style="color:#000;text-align:center;font-weigth:600;font-size:16px">{{orderDetail.deliverMoney}}</p>
                </template>
              </el-table-column>
            </el-table>
            <div class="merk_total">
              <p ><span>运 费:</span><span>￥{{orderDetail.deliverMoney}}</span></p>
              <p><span>积 分:</span><span>{{orderDetail.pointsTotal}}</span></p>
              <p><span>人民币:</span><span>￥{{orderDetail.cnyTotal}}</span></p>
              <p><span style="color:#000">总支付:</span><span style="color:red;font-size:15px">￥{{orderDetail.cnyTotal + (orderDetail.deliverMoney || 0)}}</span></p>
            </div>
        </div>
    </el-dialog>
  </div>
  </div>
</template>

<script>
import { orderListApi, sendOrderApi, deleteOrderApi, cancelOrderApi, backMonenyOrderApi, expressOrderApi, orderDetailApi, searchExpressCompanyApi } from '@/api/request.js'
import LeftMenus from '@/views/components/OrderLeftMenus.vue'
import BreadCrumb from '@/views/components/Breadcrumb'
export default {
  data () {
    return {
      params: {
        // 人民币支付来源  wx / 支付宝
        cnySource: '',
        page: 1,
        // 是否评价
        isComment: '',
        // 是否需要发票 0否 1是
        isInvoice: '',
        orderNo: '',
        // 订单识别码
        orderSn: '',
        pageSize: 10,
        // 订单状态-3拒收，-2未付款，-1用户取消，0待发货，1配送中，2确认收货
        status: '',
        // 店铺名称
        storeName: '',
        uid: '',
        // 买家账号
        userName: ''
      },
      tableLists: [],
      total: 0,
      currentPage: 1,
      sendDialogVisible: false,
      sendApiParams: {
        expressCode: '',
        expressNo: '',
        orderId: '',
        uid: '',
        userName: ''
      },
      cancelDialogVisible: false,
      cancelReason: '',
      deleteDialogVisible: false,
      deleteReason: '',
      expressInfo: null,
      expressDiagVisible: false,
      orderDetailVisible: false,
      orderDetail: {},
      isSeeExpressFromDetail: false,
      expressCompanys: [],
      loading:false
    }
  },
  components: {
    BreadCrumb,
    LeftMenus
  },
  mounted () {
    this.initList()
  },
  methods: {
    initList () {
      this.loading = true
      const { storeId } = this.$store.state.print.all
      const that = this
      let params = { storeId, isBusiness: 1 }
      for (let key in this.params) {
        if (this.params[key] !== '') {
          params[key] = this.params[key]
        }
      }
      orderListApi(params).then(res => {
        if (res.data.code === 200) {
          this.loading = false
          let { orderResList, count } = res.data.data
          // list.forEach(li => {
          //   li.orderGoodsList.forEach(goods => {
          //     // goods.specDes = JSON.parse(goods.specDes.replace(/^["] | ["]$/g, "'"))
          //   })
          // })
          that.tableLists = orderResList
          that.total = count
          // console.log(that.tableLists)
        }
      })
    },
    handleSizeChange (size) {
      this.params.pageSize = size
      this.initList()
    },
    handleCurrentChange (page) {
      this.params.page = page
      this.initList()
    },
    inputSearch () {
      clearTimeout(this.setTimer)
      this.setTimer = setTimeout(() => {
        this.params.page = 1
        this.currentPage = 1
        this.initList()
      }, 200)
    },
    async sendGoods (id) {
      this.sendApiParams.orderId = id
      this.expressCompanys.length === 0 && (this.expressCompanys = (await searchExpressCompanyApi()).data.data)
      this.sendDialogVisible = true
    },
    sureSendApi () {
      const { userName, uid } = this.$store.state.print.all
      const { expressCode, expressNo } = this.sendApiParams
      this.sendApiParams.uid = uid
      this.sendApiParams.userName = userName
      if (!expressCode || !expressNo) {
        this.$message({
          type: 'error',
          message: '请填写完成发货信息'
        })
        return
      }
      sendOrderApi(this.sendApiParams).then(res => {
        if (res.data.code === 200) {
          this.$message({
            type: 'success',
            message: '发货成功'
          })
          this.initList()
          this.sendApiParams = {
            expressCode: '',
            expressNo: '',
            orderId: '',
            uid: '',
            userName: ''
          }
          this.sendDialogVisible = false
        }
      })
    },
    cancelOrder (id) {
      this.orderId = id
      this.cancelDialogVisible = true
    },
    suerCancel () {
      if (!this.cancelReason) {
        this.$message({
          type: 'error',
          message: '请填写取消订单原因'
        })
        return
      }
      const { userName, uid } = this.$store.state.print.all
      cancelOrderApi({ userName, uid, type: 1, orderId: this.orderId, reason: this.cancelReason }).then(res => {
        if (res.data.code === 200) {
          this.cancelDialogVisible = false
          this.$message({
            type: 'success',
            message: '订单取消成功'
          })
          this.initList()
          this.cancelReason = ''
        } else {
          this.$message({
            type: 'warning',
            message: res.data.message
          })
        }
      })
    },
    deleteOrder (id) {
      this.deleteDialogVisible = true
      this.orderId = id
    },
    suerDelete () {
      if (!this.deleteReason) {
        this.$message({
          type: 'error',
          message: '请填写删除订单原因'
        })
        return
      }
      const { userName, uid } = this.$store.state.print.all
      deleteOrderApi({ userName, uid, reason: this.deleteReason, type: 1, orderId: this.orderId }).then(res => {
        if (res.data.code === 200) {
          this.$message({
            type: 'success',
            message: '删除订单成功'
          })
          this.initList()
          this.deleteDialogVisible = false
          this.deleteReason = ''
        } else {
          this.$message({
            type: 'warning',
            message: res.data.message
          })
        }
      })
    },
    refundClick (data) {
      const [id, type] = data
      if (type === 1) {
        // 商家同意
        this.$confirm('确定要退款吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          backMonenyOrderApi({ refundId: id }, 1).then(res => {
            if (res.data.code === 200) {
              this.$message({
                type: 'success',
                message: '退款成功'
              })
            } else {
              this.$message({
                type: 'warning',
                message: res.data.message
              })
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消退款'
          })
        })
      } else {
        // 商家拒绝
        this.refundVisible = true
      }
    },
    expressDetail (id, type) {
      expressOrderApi({ orderId: id }).then(res => {
        if (res.data.code === 200) {
          res.data.data.traces.reverse()
          this.expressInfo = res.data.data
          type === 1 && (this.expressDiagVisible = true)
        } else {
          this.$message({
            type: 'warning',
            message: res.data.message
          })
        }
      })
    },
    seeDetail (scope) {
      if (this.orderDetail.id === scope.id) {
        this.orderDetailVisible = true
        return
      }
      this.orderDetail = null
      this.expressInfo = null
      orderDetailApi({ orderId: scope.id }).then(res => {
        if (res.data.code === 200) {
          const { address, addressee, phone } = res.data.data
          scope = Object.assign(scope, { address, addressee, phone })
          this.orderDetail = scope
          this.orderDetailVisible = true;
          [1, 2].includes(scope.status) && this.expressDetail(scope.id, 2)
        } else {
          this.$message({
            type: 'warning',
            message: res.data.message
          })
        }
      })
    },
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 4) {
        return {
          rowspan: this.orderDetail.orderGoodsList.length,
          colspan: 1
        }
      } else {
        return {
          rowspan: 1,
          colspan: 1
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.cms_order{
  display: flex;
  justify-content: center;
}
.cms_container {
  width: 1100px;
  background-color: #fff;
  min-height: 400px;
  padding: 10px 20px 40px;
}
.cms_search {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin:10px;
  .el-input {
    width: 200px;
    margin: 5px;
  }
  .el-select {
    margin: 5px;
  }
  >>> input {
    padding: 0 10px !important;
  }
}
.cms_pagination {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-top: 40px;
}
.cms_table_box{
  border: 1px solid whitesmoke;
  margin-top: 15px;
  padding-bottom: 30px;
h3{
    padding: 10px;
    font-size: 14px;
    background-color: whitesmoke;
    border-top:2px solid #b0b8b8;
  }
  .cms_table{
    padding:10px;
}
.cms_btn{
  margin-top: 5px;
  margin-left: 0 !important;
}
.cms_btns{
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
}
.express_item span:first-child{
  display: inline-block;
  width: 100px;
  margin: 10px 20px;
}
.cms_block{
  margin-left: -20px;
}
.express_timeline{
  margin: 30px 20px 10px;
}
.cms_o_status{
  height: 80px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background-color: #f1f1f1;
  p{
    font-size: 16px;
    color: #000;
  }
}
@font-face {
  font-family: 'iconfont';  /* project id 1772366 */
  src: url('//at.alicdn.com/t/font_1772366_u05qpja3k0s.eot');
  src: url('//at.alicdn.com/t/font_1772366_u05qpja3k0s.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_1772366_u05qpja3k0s.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_1772366_u05qpja3k0s.woff') format('woff'),
  url('//at.alicdn.com/t/font_1772366_u05qpja3k0s.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_1772366_u05qpja3k0s.svg#iconfont') format('svg');
}
.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
    }
.cms_s0{
  color: red;
  display: block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border: 1px solid red;
  border-radius: 100%;
  margin-right: 10px;
}
.cms_s1{
  color: red;
  font-size: 30px;
   margin-right: 10px;
}
.cms_s2{
  color: orange;
  font-size: 30px;
   margin-right: 10px;
}
.cms_s4{
  color: green;
  font-size: 40px;
   margin-right: 10px;
}
.cms_s3{
  color: #00baad;
  font-size: 30px;
   margin-right: 10px;
}
.merk_detail li,.merk_express li{
  font-size: 13px;
  color: #666;
  margin-bottom: 10px;
  display: inline-block;
  width: 34%;
}
.merk_detail li:first-child,.merk_express li:first-child{
  line-height: 30px;
  border-bottom: 1px solid #eee;
  font-size: 15px;
  font-weight: 600;
  margin: 20px 0;
  display: block;
  width: 100%;
}
.merk_span{
  margin-left: 5px;
  color: #0443E6;
  cursor: pointer;
}
.merk_goods{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  img{
    width: 80px;
    display: block;
    background-color: #eee;
    height: 80px;
    margin-right: 10px;
  }
  >div{
    flex:1;
  }
  p{
    font-size: 12px;
    color: #333;
    font-weight: 600;
  }
}
.merk_total{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-top: 10px;
  margin-right: 20px;
  p{
    font-size: 600;
    font-size: 12px;
    color: #666;
    margin-bottom: 4px;
    span:last-child{
      font-size: 13px;
      display: inline-block;
      width: 80px;

    }
    span:first-child{
      display: inline-block;
      text-align: right;
      margin-right: 10px;
    }
  }
}
.cms_detail_table /deep/ tr:first-child:hover td:last-child{
  background-color: #fff !important;
}
.cms_table1 /deep/ tr td{
  background-color: #fff !important;
}
.cms_express{
  display: flex;
  flex-direction: row;
  align-items: center;
  img{
    width: 24px;
    margin-right: 10px;
  }
}
</style>
